<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>升级</title>
	<link rel="stylesheet" href="../css/common.css">
</head>
<style>
	body{
		background-color: #F5F5F5;
		min-height: 90vh;
	}
	.upgrade{
		padding: 1.25rem;
	}
	.couponImg{
		position: relative;
		background-color: #fff;
		margin-bottom: 1.25rem;
	}
	.couponBac{
		width: 100%;
		height: 8rem;
	}
	.upgradeBox{
		height: 8rem;
		position: absolute;
		width: 100%;
		top: 0;
	}
	.u_left{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 1.25rem;
		display: flex;
		align-items: center;
	}
	.u_left img{
		width: 4rem;
		height: 4rem;
	}
	.u_grade{
		margin-left: 0.625rem;
		text-align: center;
	}
	.userGrade{
		font-size: 0.875rem;
		font-weight: bold;
	}
	.userState{
		font-size: 0.875rem;
		color: #d9938b;
	}
	.u_right{
		position: absolute;
		right: 1.25rem;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1.6875rem;
		color: #CA6461;
	}
	.styleBox {
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		padding: 5px 10px;
	}
	.styleList{
		width: 50%;
		float: left;
	}
	.styleList .yuan{
		width: 3px;
		height: 3px;
		border-radius: 4px;
		background-color: #666;
		float: left;
		margin-top: 8px;
	}
	.styleList .styleCon{
		font-size: 0.875rem;
		float: left;
		margin-left: 0.375rem;
	}
	.styleCon span {
		color: #FF0000;
	}
	.shuoming{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 999;
		display: none;
		padding: 1rem;
		box-sizing: border-box;
	}
	.close{
		width: 1.5rem;
		height: 1.5rem;
		float: right;
		overflow: hidden;
	}
	.classBtm{
		position: fixed;
		bottom: 0;
		height: 3.8rem;
		line-height: 3.8rem;
		width: 100%;
		font-size: 1rem;
		border-top: #E4E4E4;
		background-color: #fff;
		display: none;
	}
	.classMoney{
		width: 50%;
		text-align: center;
		color: #FF0000;
		float: left;
	}
	.classBtn{
		background-color: #007AFF;
		color: #fff;
		width: 50%;
		text-align: center;
		float: left;
	}
</style>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">
				<img src="../assets/left_J.png" >
			</div>
			<div class="tabCenter">开通会员</div>
			<div class="tabRight">特权说明</div>
		</div>
	</div>
	<div class="upgrade">
		<div class="couponList">
			<div class="couponImg">
				<img src="../assets/coupon.png" class="couponBac" >
				<div class="upgradeBox cleardrift">
					<div class="u_left">
						<img src="../assets/upgrade.png" >
						<div class="u_grade">
							<div class="userGrade">股东</div>
							<div class="userState">你尚未开通</div>
						</div>
					</div>
					<div class="u_right">￥968 元</div>
				</div>
				<div class="styleBox cleardrift">
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">可学习全部课程</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">直邀邀请奖励: <span>60%</span></div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">搭建变现私域流量池</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">间接邀请奖励: <span>10%</span></div>
					</div>
				</div>
			</div>
			
			<div class="couponImg">
				<img src="../assets/coupon.png" class="couponBac" >
				<div class="upgradeBox cleardrift">
					<div class="u_left">
						<img src="../assets/upgrade.png" >
						<div class="u_grade">
							<div class="userGrade">股东</div>
							<div class="userState">你尚未开通</div>
						</div>
					</div>
					<div class="u_right">￥968 元</div>
				</div>
				<div class="styleBox cleardrift">
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">可学习全部课程</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">直邀邀请奖励: <span>60%</span></div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">搭建变现私域流量池</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">间接邀请奖励: <span>10%</span></div>
					</div>
				</div>
			</div>
			<div class="couponImg">
				<img src="../assets/coupon.png" class="couponBac" >
				<div class="upgradeBox cleardrift">
					<div class="u_left">
						<img src="../assets/upgrade.png" >
						<div class="u_grade">
							<div class="userGrade">股东</div>
							<div class="userState">你尚未开通</div>
						</div>
					</div>
					<div class="u_right">￥968 元</div>
				</div>
				<div class="styleBox cleardrift">
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">可学习全部课程</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">直邀邀请奖励: <span>60%</span></div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">搭建变现私域流量池</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">间接邀请奖励: <span>10%</span></div>
					</div>
				</div>
			</div>
			<div class="couponImg">
				<img src="../assets/coupon.png" class="couponBac" >
				<div class="upgradeBox cleardrift">
					<div class="u_left">
						<img src="../assets/upgrade.png" >
						<div class="u_grade">
							<div class="userGrade">股东</div>
							<div class="userState">你尚未开通</div>
						</div>
					</div>
					<div class="u_right">￥968 元</div>
				</div>
				<div class="styleBox cleardrift">
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">可学习全部课程</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">直邀邀请奖励: <span>60%</span></div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">搭建变现私域流量池</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">间接邀请奖励: <span>10%</span></div>
					</div>
				</div>
			</div>
			<div class="couponImg">
				<img src="../assets/coupon.png" class="couponBac" >
				<div class="upgradeBox cleardrift">
					<div class="u_left">
						<img src="../assets/upgrade.png" >
						<div class="u_grade">
							<div class="userGrade">股东</div>
							<div class="userState">你尚未开通</div>
						</div>
					</div>
					<div class="u_right">￥968 元</div>
				</div>
				<div class="styleBox cleardrift">
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">可学习全部课程</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">直邀邀请奖励: <span>60%</span></div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">搭建变现私域流量池</div>
					</div>
					<div class="styleList cleardrift">
						<div class="yuan"></div>
						<div class="styleCon">间接邀请奖励: <span>10%</span></div>
					</div>
				</div>
			</div>
			
			
		</div>
	</div>
	<!-- 弹窗 -->
	<div class="shuoming">
		<div class="cleardrift">
			<img src="../assets/close.png" class="close cleardrift" >
		</div>
		<div>1111</div>
	</div>
	<!-- 立即购买 -->
	<div class="classBtm cleardrift">
		<div class="classMoney">￥2999</div>
		<div class="classBtn">立即购买</div>
	</div>
</body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/clipboard.min.js"></script>
<script src="../js/common.js"></script>
<script>
	$('.tabRight').click(function(){
		$('.shuoming').fadeIn(500)
	})
	$('.close').click(function(){
		$('.shuoming').fadeOut(500)
	})
	$(".couponImg").click(function(){
		event.stopPropagation();
		$(".classBtm").fadeToggle(500)
		var display=$('.classBtm').css('display')
		if(display == 'block'){
			$(".upgrade").css({
				'margin-bottom':'2.5rem'
			})
		} else {
			$(".upgrade").css({
				'margin-bottom':'0'
			})
		}
	})
	
</script>
</html>